<template>
  <template v-if="!hasPermission(menu)">
    <!-- 没有权限的菜单不显示 -->
  </template>
  <el-menu-item 
    v-else-if="!hasChildren" 
    :index="resolvePath(menu.path)"
  >
    <el-icon v-if="menu.meta?.icon">
      <component :is="menu.meta.icon" />
    </el-icon>
    <template #title>
      <span class="menu-title">{{ menu.meta?.title }}</span>
    </template>
  </el-menu-item>

  <el-sub-menu 
    v-else 
    :index="resolvePath(menu.path)"
    :show-timeout="0"
    :hide-timeout="0"
    popper-class="sidebar-popper"
  >
    <template #title>
      <el-icon v-if="menu.meta?.icon">
        <component :is="menu.meta.icon" />
      </el-icon>
      <span class="menu-title">{{ menu.meta?.title }}</span>
    </template>

    <template v-for="child in menu.children" :key="child.path">
      <template v-if="child.children && child.children.length > 0">
        <sidebar-item
          :menu="child"
          :base-path="resolvePath(menu.path)"
        />
      </template>
      <el-menu-item 
        v-else
        :index="resolvePath(child.path)"
      >
        <el-icon v-if="child.meta?.icon">
          <component :is="child.meta.icon" />
        </el-icon>
        <template #title>
          <span class="menu-title">{{ child.meta?.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-sub-menu>
</template>

<script setup lang="ts" generic="T">
import { computed } from "vue";
import type { RouteRecordRaw } from "vue-router";
import { useUserStore } from '@/store/user';

interface Props {
  menu: RouteRecordRaw;
  basePath?: string;
}

const props = defineProps<Props>()

const userStore = useUserStore();

const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0;
});

function hasPermission(route: RouteRecordRaw) {
  if (!route.meta?.permission) return true;
  return userStore.permissions.includes(route.meta.permission as string);
}

function resolvePath(routePath: string) {
  if (!routePath) return '';
  if (routePath.includes('/')) return routePath;
  return props.basePath ? `${props.basePath}/${routePath}` : `/${routePath}`;
}

// 添加默认导出
defineOptions({
  name: 'SidebarItem'
})
</script>

<style lang="scss" scoped>
.el-menu-item,
.el-sub-menu__title {
  display: flex;
  align-items: center;

  .el-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
  }

  .menu-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 子菜单样式
:deep(.el-sub-menu) {
  .el-menu {
    .el-menu-item {
      min-width: auto;
      padding-left: 60px !important;

      &:hover {
        background-color: var(--menu-hover-bg-color);
      }

      &.is-active {
        background-color: var(--menu-active-bg-color);
        color: var(--menu-active-text-color);
        border-right: 2px solid var(--menu-active-text-color);
      }
    }
  }
}

// 菜单折叠时的样式
:deep(.el-menu--collapse) {
  .menu-title {
    display: none;
  }

  .el-icon {
    margin: 0;
  }
}

// 弹出菜单样式
:global(.sidebar-popper) {
  .el-menu--popup {
    min-width: 200px;
    
    .el-menu-item {
      display: flex;
      align-items: center;
      padding: 0 20px !important;

      .el-icon {
        margin-right: 12px;
      }
    }
  }
}
</style>
